import QtQuick
import Qt5Compat.GraphicalEffects

Rectangle {
    id: leftContent
    color: "#d8ddea"
    property int activeBar: 0
    property var leftBarData: [
        {
            icon: "qrc:/icon/home.svg",
            text: "发现音乐",
            qml: "../pages/PageFindMusic.qml",
            show: true
        },
        {
            icon: "qrc:/icon/search.svg",
            text: "搜索音乐",
            qml: "../pages/PageSearchMusic.qml",
            show: true
        },
        {
            icon: "qrc:/icon/like.svg",
            text: "我喜欢的音乐",
            qml: "",
            show: true
        },
        {
            icon: "qrc:/icon/download.svg",
            text: "本地与下载",
            qml: "",
            show: true
        },
        {
            icon: "qrc:/icon/recently.svg",
            text: "最近播放",
            qml: "",
            show: true
        },
        {
            icon: "qrc:/icon/collect.svg",
            text: "我的收藏",
            qml: "../pages/PageCollectMusic.qml",
            show: true
        },
        {
            icon: "qrc:/icon/setting.svg",
            text: "设置",
            qml: "",
            show: true
        },
        {
            icon: "qrc:/icon/home.svg",
            text: "歌单详情",
            qml: "../pages/PageSongListDetails.qml",
            show: false
        },
    ]
    property int fontSize: 11
    property int itemHeight: 40
    property var pageParam: null
    function toPage(text, param) {
        this.pageParam = param;
        for (let i = 0; i < leftBarData.length; i++) {
            if (leftBarData[i].text === text) {
                activeBar = i;
                return;
            }
        }
        this.pageParam = null;
        toast.show("找不到的页面");
    }

    function contentQml() {
        return leftBarData[activeBar].qml;
    }

    Component.onCompleted: {
        p_db.getValues(['activeBar', 'pageParam']).then(res => {
            if (res.pageParam !== null)
                pageParam = JSON.parse(res.pageParam);
            if (res.activeBar !== null)
                activeBar = +res.activeBar;
        });
    }

    Component.onDestruction: {
        p_db.setValues({
            activeBar: activeBar,
            pageParam: pageParam
        });
    }

    Flickable {
        id: leftBarFlickable
        anchors.fill: parent
        contentHeight: Math.max(height, leftBarColumn.height)
        clip: true
        Column {
            id: leftBarColumn
            topPadding: 10
            bottomPadding: 10
            spacing: 10
            leftPadding: 8
            Repeater {
                id: leftBarRepeater
                model: leftBarData.length
                delegate: repeaterDelegate
            }
        }

        Component {
            id: repeaterDelegate
            Rectangle {
                visible: leftBarData[index].show
                property bool isHover: false

                function backgroundColor() {
                    if (activeBar == index) {
                        return p_theme.currentTheme().fontColor;
                    }
                    if (isHover) {
                        return p_theme.currentTheme().subBackgroundColor;
                    }
                    return p_theme.currentTheme().backgroundColor;
                }

                width: leftBarFlickable.width - 16
                height: itemHeight
                color: backgroundColor()
                radius: itemHeight / 3
                Behavior on color {
                    ColorAnimation {
                        duration: 300
                        easing.type: Easing.InOutQuad
                    }
                }
                Row {
                    anchors.verticalCenter: parent.verticalCenter
                    leftPadding: 10
                    Rectangle {
                        width: 24
                        height: 24
                        radius: 4
                        color: activeBar == index ? p_theme.currentTheme().backgroundColor : p_theme.currentTheme().fontColor
                        scale: activeBar == index ? 1.1 : 1
                        Image {
                            id: img
                            anchors.centerIn: parent
                            width: 15
                            height: width
                            source: leftBarData[index].icon
                            ColorOverlay {
                                anchors.fill: parent
                                source: parent
                                color: "white"
                            }
                        }
                        Behavior on color {
                            ColorAnimation {
                                duration: 300
                                easing.type: Easing.InOutQuad
                            }
                        }
                        Behavior on scale {
                            NumberAnimation {
                                duration: 300
                                easing.type: Easing.InOutQuad
                            }
                        }
                    }

                    Text {
                        id: text
                        leftPadding: 10
                        anchors.verticalCenter: parent.verticalCenter
                        text: qsTr(leftBarData[index].text)
                        color: activeBar == index ? p_theme.currentTheme().backgroundColor : p_theme.currentTheme().fontColor
                        font.pointSize: leftContent.fontSize
                        scale: activeBar == index ? 1.1 : 1
                        font.bold: activeBar == index ? true : false
                        Behavior on color {
                            ColorAnimation {
                                duration: 300
                                easing.type: Easing.InOutQuad
                            }
                        }
                        Behavior on scale {
                            NumberAnimation {
                                duration: 300
                                easing.type: Easing.InOutQuad
                            }
                        }
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onEntered: {
                        parent.isHover = true;
                    }
                    onExited: {
                        parent.isHover = false;
                    }
                    onClicked: {
                        leftContent.activeBar = index;
                        leftContent.pageParam = null;
                    }
                }
            }
        }
    }
}
